<template>
  <div>
    <div v-if="show" class="bs">
      <div class="head el-row--flex is-justify-space-between">
        <el-button
          icon="el-icon-refresh-right"
          size="small"
          type="head-button"
          @click="detail(org_id, threat_id, host_name, obj)"
        >
          刷新
        </el-button>
        <el-button size="small" type="head-button">{{ threat_id }}</el-button>
        <el-button
          icon="el-icon-back"
          size="small"
          type="head-button"
          @click="onBack"
        >
          返回
        </el-button>
        <el-button
          icon="el-icon-printer"
          size="small"
          type="head-button"
          @click="onPrint"
        >
          打印
        </el-button>
      </div>
      <div class="content">
        <div class="information">
          <div class="function-bg">
            <el-button
              size="small"
              type="function-button"
              @click="handleChangeToast('Allocation')"
            >
              {{ info.assign || "未分配" }}
            </el-button>
            <el-button
              size="small"
              type="function-button"
              @click="handleChangeToast('StateChanges')"
            >
              {{ info.status || "未知" }}
            </el-button>
            <el-button
              size="small"
              type="function-button"
              @click="handleChangeToast('Comment')"
            >
              评论
            </el-button>
          </div>
          <div class="host-name">
            {{ host_name || "终端名" }}
            <el-button
              size="small"
              type="copy-button"
              @click="handleCopyText(host_name)"
            >
              复制
            </el-button>
          </div>
          <div class="host-name light">
            {{ defaultInfo.info.process_name }}
            <el-button
              size="small"
              type="copy-button"
              @click="handleCopyText(defaultInfo.info.process_name)"
            >
              复制
            </el-button>
          </div>
          <div class="collapse">
            <el-collapse v-model="activeName">
              <el-collapse-item name="1" title="进程信息">
                <slot name="progress"></slot>
              </el-collapse-item>

              <el-collapse-item
                v-if="defaultInfo.threats.length"
                name="2"
                title="威胁指标"
              >
                <slot name="threatDetection"></slot>
              </el-collapse-item>

              <el-collapse-item
                v-if="handleCheckMultiBlock('net')"
                name="3"
                title="网络操作"
              >
                <slot name="net"></slot>
              </el-collapse-item>

              <el-collapse-item
                v-if="handleCheckMultiBlock('reg')"
                name="4"
                title="注册表操作"
              >
                <slot name="reg"></slot>
              </el-collapse-item>

              <el-collapse-item
                v-if="handleCheckMultiBlock('disk')"
                name="5"
                title="磁盘操作"
              >
                <slot name="disk"></slot>
              </el-collapse-item>

              <el-collapse-item
                v-if="handleCheckMultiBlock('dns')"
                name="6"
                title="DNS 请求"
              >
                <slot name="dns"></slot>
              </el-collapse-item>

              <el-collapse-item
                v-if="handleCheckMultiBlock('proc')"
                name="7"
                title="进程操作"
              >
                <slot name="proc"></slot>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div v-loading="loading" class="chart">
          <chart ref="chart" @change-node="handleChangeNode" />
        </div>
      </div>
    </div>
    <div>
      <allocation ref="Allocation" @change="reload" />
      <comment ref="Comment" @change="reload" />
      <state-changes ref="StateChanges" @change="reload" />
    </div>
  </div>
</template>

<script>
import Chart from "@/views/menace/components/chart";
import threat from "@/api/threat";
import Allocation from "@/views/menace/toast/Allocation";
import Comment from "@/views/menace/toast/comment";

import StateChanges from "@/views/menace/toast/stateChanges";

export default {
  name: "Detail",
  components: { Chart, Allocation, Comment, StateChanges },
  data: () => {
    return {
      activeName: "1",
      loading: false,
      show: false,
      threat_id: "",
      org_id: "",
      info: {},
      obj: {},
      defaultInfo: {
        info: {},
        threats: [],
        actions: {
          details: {}
        }
      },
      host_name: "",
      progressInfo: [
        {
          key: "image_path",
          value: "进程路径"
        },
        {
          key: "cmdline",
          value: "命令行"
        },
        {
          key: "context_id",
          value: "上下文 ID"
        },
        {
          key: "pid",
          value: "PID"
        },
        {
          key: "image_original_name",
          value: "原始文件名"
        },
        {
          key: "image_signer",
          value: "发布者"
        },
        {
          key: "md5",
          value: "MD5"
        },
        {
          key: "sha256",
          value: "SHA256"
        },
        {
          key: "sid",
          value: "SID"
        },
        {
          key: "admin",
          value: "提升权限"
        },
        {
          key: "status",
          value: "运行状态"
        },
        {
          key: "blocked",
          value: "已阻止"
        },
        {
          key: "start_time",
          value: "创建时间"
        },
        {
          key: "end_time",
          value: "退出时间"
        }
      ]
    };
  },
  mounted() {
    document.addEventListener("keydown", e => {
      if (e.keyCode === 27) {
        this.show = false;
      }
    });
  },
  methods: {
    handleCheckMultiBlock(name) {
      let data = this.defaultInfo.actions.details;
      return data[name] && data[name].length;
    },
    handleGetMultiBlockData(name) {
      const getInfoDom = item => {
        let keys = Object.keys(item);
        return keys.map(k => {
          let desc = item[k];
          (k.indexOf("time") > -1 || k.indexOf("时间") > -1) &&
            (desc = new Date(item[k]).Format("yyyy-MM-dd hh:mm:ss"));

          typeof desc === "boolean" && (desc = desc ? "是" : "否");
          return (
            <span class="progress-info">
              <div class="title">{k} </div>
              <div class="desc">{desc}</div>
            </span>
          );
        });
      };
      const getBlockDom = list => {
        return list.map(item => {
          return (
            <div class="MULTIPLE-SETS-OF-DATA-BLOCKS">{getInfoDom(item)}</div>
          );
        });
      };
      let data = this.defaultInfo.actions.details[name];
      this.$slots[name] = <div>{getBlockDom(data)}</div>;
    },
    handleGetThreatDetection() {
      let threats = this.defaultInfo.threats.slice(0);
      const getInfoDom = item => {
        let keys = Object.keys(item);
        return keys.map(k => {
          return (
            <span class="progress-info">
              <div class="title">{k} </div>
              <div class="desc">{item[k]}</div>
            </span>
          );
        });
      };
      const getLineDom = threats => {
        return threats.map(item => {
          return (
            <div class="pl10 pr10 MULTIPLE-PARAMETER-BLOCK">
              {getInfoDom(item)}
            </div>
          );
        });
      };

      this.$slots["threatDetection"] = <div>{getLineDom(threats)}</div>;
    },
    handleGetProgressInfo() {
      let obj = this.progressInfo.slice(0);
      let dom = (
        <div class="pl10 pr10 xxx">
          {obj.map(k => {
            if (!(k.key in this.defaultInfo.info)) {
              return "";
            }
            let desc = this.defaultInfo.info[k.key];
            (k.key.indexOf("time") > -1 || k.key.indexOf("时间") > -1) &&
              this.defaultInfo.info[k.key] != null &&
              this.defaultInfo.info[k.key] != "" &&
              (desc = new Date(this.defaultInfo.info[k.key]).Format(
                "yyyy-MM-dd hh:mm:ss"
              ));
            typeof this.defaultInfo.info[k.key] === "boolean" &&
              (desc = this.defaultInfo.info[k.key] ? "是" : "否");
            return (
              <span class="progress-info is-progress-block">
                <div class="title">{k.value} </div>
                <div class="desc">{desc}</div>
              </span>
            );
          })}
        </div>
      );
      this.$slots["progress"] = dom;
    },
    handleChangeToast(name) {
      this.$refs[name].show(this.org_id, this.threat_id, this.info);
    },
    handleCopyText(text) {
      const input = document.createElement("input");
      input.setAttribute("readonly", "readonly");
      input.value = text;
      document.body.appendChild(input);
      input.setSelectionRange(0, 9999);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
      this.$message.success("复制成功");
    },
    handleChangeNode(e) {
      this.defaultInfo = e;
      this.handleGetProgressInfo();
      this.handleGetThreatDetection();
      this.handleGetMultiBlockData("net");
      this.handleGetMultiBlockData("reg");
      this.handleGetMultiBlockData("disk");
      this.handleGetMultiBlockData("dns");
      this.handleGetMultiBlockData("proc");
    },
    hanleReload() {
      this.$emit("reload", this.threat_id);
      this.reload();
    },
    onBack() {
      this.show = false;
    },
    onPrint() {
      this.$refs.chart.saveFullImage();
    },
    reload() {
      threat
        .detail({
          org_id: this.org_id,
          threat_id: this.threat_id
        })
        .then(res => {
          this.info = res.data.detail;
        });
    },
    detail(org_id, threat_id, host_name, obj) {
      this.threat_id = threat_id;
      this.org_id = org_id;
      this.obj = obj;
      this.show = true;
      this.loading = true;
      this.host_name = host_name;
      threat
        .detail({
          org_id,
          threat_id
        })
        .then(res => {
          this.info = res.data.detail;
          this.loading = false;
          this.$refs.chart.create(
            res.data.tree,
            res.data.detail.focus_context_id
          );
          this.$message.info("按 ESC 退出");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.xxx {
  span {
    margin: 0 !important;
  }
}
.is-progress-block {
  padding: 10px 0;
  border-bottom: #000000 solid 1px;
  &:last-child {
    border-color: transparent;
  }
}
.MULTIPLE-SETS-OF-DATA-BLOCKS {
  padding: 10px 0;
  padding-right: 20px;
  border-bottom: #000000 solid 1px;
  &:last-child {
    border-color: transparent;
  }
  .progress-info {
    padding: 10px 10px;
    margin: 0 !important;
  }
}
.MULTIPLE-PARAMETER-BLOCK {
  padding: 10px 0;
  padding-right: 20px;
  border-bottom: #000000 solid 1px;
  &:last-child {
    border-color: transparent;
  }
  .progress-info {
    padding: 10px 10px;
    margin: 0 !important;
  }
}
.progress-info {
  display: flex !important;
  .title {
    width: 25% !important;
    word-break: break-all !important;
  }
  .desc {
    width: 75% !important;
    word-break: break-all !important;
  }
}

.bs {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: #f5f5f5;
}
::v-deep .el-divider--horizontal {
  margin: 10px 0;
}
::v-deep .el-collapse-item__content {
  padding: 10px 0;
}
::v-deep .el-collapse-item__header {
  font-weight: bold;
  padding-left: 10px;
  background: #c3c3c3;
  font-size: 16px;
}
::v-deep .el-collapse-item__header.is-active {
  background-color: #e00;
  color: white;
}
.el-button--function-button {
  margin-left: 0;
  width: calc(100% / 3);
  border-radius: 0;
  color: $--color-white;
  background-color: $--color-black;

  &:first-child {
    border-left-color: $--color-info;
  }
  &:last-child {
    border-right-color: $--color-info;
  }
}
.el-button--copy-button {
  margin-left: 0;
  border-radius: 0;
  color: $--color-white;
  background-color: $--color-black;
  position: absolute;
  right: 10px;
}

.el-button--head-button {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
  border: $--color-white solid 1px;
}
.el-button--head-button:focus,
.el-button--head-button:hover {
  background: #a6a9ad;
  border-color: #a6a9ad;
  color: #fff;
}
.el-button--head-button.is-active,
.el-button--head-button:active {
  background: #82848a;
  border-color: #82848a;
  color: #fff;
}
.head {
  background-color: $--color-info;
  padding: 0 10px;
  .el-button {
    border: none;
    padding: 10px;
  }
}
.content {
  width: 100%;
  height: calc(100vh - 10px);
  .chart {
    width: 75%;
    background-color: #f5f5f5;
    height: calc(100% - 32px);
    float: right;
  }
  .information {
    float: right;
    width: 25%;
    height: 100%;
    padding-bottom: 40px;
    background: white;
    border-left: #000 solid 1px;
    box-sizing: border-box;
    overflow-y: auto;
    .el-button {
      font-weight: bold;
      border: none;
    }
    .el-button:hover {
      background-color: #eee;
      color: black;
    }
    .light {
      background-color: $--color-info-light-1 !important;
    }
    .function-bg {
      background-color: $--color-info;
    }
    .host-name {
      width: 100%;
      background-color: $--color-info;
      position: relative;
      height: 32px;
      text-align: center;
      line-height: 32px;
      color: $--color-white;
    }
    .collapse {
      .text {
        word-break: break-all;
        padding: 0 10px;
      }
      span {
        margin: 0 10px;
        display: flex;
        width: 100%;
        a {
          width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
